<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>父子组件通信案例</title>
  </head>
  <body>
    <div id="app">
      <cpn
        :number1="num1"
        :number2="num2"
        @num1change="num1change"
        @num2change="num2change"
      ></cpn>
    </div>
    <template id="cpn">
      <div>
        <h3>props:{{number1}}</h3>
        <h3>data:{{dnumber1}}</h3>
        <!-- <input type="text" v-model="dnumber1" /> -->
        <input type="text" :value="dnumber1" @input="num1Input" />
        <h3>props:{{number2}}</h3>
        <h3>data:{{dnumber2}}</h3>
        <input type="text" :value="dnumber2" @input="num2Input" />
      </div>
    </template>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          num1: 1,
          num2: 2,
        },
        methods: {
          num1change(value) {
            this.num1 = parseInt(value);
          },
          num2change(value) {
            this.num2 = parseInt(value);
          },
        },
        components: {
          cpn: {
            template: "#cpn",
            props: {
              number1: Number,
              number2: Number,
            },
            data() {
              return {
                dnumber1: this.number1,
                dnumber2: this.number2,
              };
            },
            methods: {
              num1Input(event) {
                //1.将input中的value赋值到的dnumber中
                this.dnumber1 = event.target.value;
                //2.为了让父组件可以修改值，发出一个事件
                this.$emit("num1change", this.dnumber1);
                //3.同时修改的number2 中的值
                this.dnumber2 = this.dnumber1 * 100;
                this.$emit("num2change", this.dnumber2);
              },
              num2Input(event) {
                this.dnumber2 = event.target.value;
                this.$emit("num2change", this.dnumber2);
                //3.同时修改的number2 中的值
                this.dnumber1 = this.dnumber2 / 100;
                this.$emit("num1change", this.dnumber1);
              },
            },
          },
        },
      });
    </script>
  </body>
</html>
